<template>
      <div id="tab">
            <div class="item">
                  <van-icon name="phone-o" /><span><a href="tel:4001878578">咨询电话</a></span>
            </div>
            <div class="item" @click="showDia">
                  <van-icon name="friends-o" /><span>立即咨询</span>
            </div>

            <dialog-box :DialogData="DialogData"></dialog-box>
      </div>
</template>

<script>
import DialogBox from "@/components/DailogBox"
      export default {
            components: {
                  DialogBox,
            },
            data() {
                  return {
                        DialogData: {
                              show: false
                        }
                  }
            },
            methods: {
                  showDia() {
                        this.DialogData.show = true
                  }
            },
      }
</script>

<style lang="scss" scoped>
#tab {
      width: 100%;
      height: 0.8rem;
      font-size: 0.3rem;
      display: flex;
      align-items: center;
      background-color: #1c9ff2;
      color: #fff;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 10000;
      .item {
            width: 50%;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            &:nth-child(1) {
                  border-right: 1px dashed #fff;
            }
            a {
                  text-decoration: none;
                  color: #fff;
            }
      }
}
</style>